<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.flowCardNum' prop='flowCardNum'>
					<el-input v-model.trim='formInline.flowCardNum' :autosize="{ minRows: 4 }" type="textarea" clearable
						placeholder='请输入流量卡卡号,多个使用","分开,例如:123,125,333' :disabled="formInline?.status == 1"
						:formatter="(value) => value.replace(/[，]/g, ',')"
						:parser="(value) => value.replace(/[，]/g, ',')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.operator' prop='operator'>
					<operatorSelect v-model='formInline.operator' clearable :placeholder='prompt?.operator'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'operator')"></operatorSelect>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.canal' prop='canal'>
					<canalSelect v-model='formInline.canal' clearable :placeholder='prompt?.canal'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'canal')"></canalSelect>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.expireDate' prop='expireDate'>
					<el-date-picker v-model='formInline.expireDate' clearable :placeholder='prompt?.expireDate'
						format="YYYY/MM/DD" value-format="YYYY-MM-DD" :style="{ width: '100%' }" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<unitParentSelect v-model='formInline.unityId' clearable :placeholder='prompt?.unityId'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityId')" />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import operatorSelect from '@/components/select/operatorSelect/operatorSelect.vue'
import canalSelect from '@/components/select/canalSelect/canalSelect.vue'
import unitParentSelect from '@/components/select/unitParentSelect/unitParentSelectTree.vue'
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/resource-management/traffic-card/index';
import { formValidateField } from '@/utils/functions'
import { message } from "@/utils/message";
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	projectName: [{ required: true, message: prompt?.projectName, trigger: 'blur' },],
	productInfo: [{ required: true, message: prompt?.productInfo, trigger: 'blur' },],
	deviceId: [{ required: true, message: prompt?.deviceId, trigger: 'blur' },],
	flowCardNum: [
		{ required: true, message: prompt?.flowCardNum, trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value) {

					value = value.replace(/,+/g, ',')
					if (value[value.length - 1] == ',') {
						value = value.substring(0, value.length - 1)
					}
					props.formInline.flowCardNum = value
					let regex = /^[a-zA-Z0-9]{10,16}$/
					let arr = value.split(',').map(item => item.trim());
					let arr1 = arr.filter((item, index) => {
						return arr.indexOf(item) !== index;
					});
					if (props.formInline.id && arr.length > 1) {
						callback(new Error('编辑时仅可输入一个序列号'));
					}
					if (arr.indexOf('') != -1) {
						callback(new Error('流量卡号不能为空'));
					} else if (arr1.length > 0) {
						callback(new Error('流量卡号不能重复'));
					} else if (arr.some(item => {
						if (!regex.test(item)) {
							message(`流量卡 ${item} 格式错误！`, { type: 'error' });
							return true;
						} else {
							return false;
						}
					})) {
						callback(new Error('流量卡号为10-16位字母或数字组合'));
					} else {
						callback();
					}
				} else {
					callback();
				}

			},
			trigger: "blur"
		}
	],
	IccId: [{ required: true, message: prompt?.IccId, trigger: 'blur' },],
	status: [{ required: true, message: prompt?.status, trigger: 'blur' },],
	operator: [{ required: true, message: prompt?.operator, trigger: 'blur' },],
	canal: [{ required: true, message: prompt?.canal, trigger: 'blur' },],
	lastFlow: [{ required: true, message: prompt?.lastFlow, trigger: 'blur' },],
	activeDate: [{ required: true, message: prompt?.activeDate, trigger: 'blur' },],
	expireDate: [{ required: true, message: prompt?.expireDate, trigger: 'blur' },],
	unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
